<template>
  <div class="content">
    <div class="head">
      <div v-for="(item,index) in title" :key="index" class="title" @click="changeType(index)">
        <div :class="[index==active?'active':'ins-active']">
          <span class="title-name">{{item.name}}</span>
        </div>
      </div>
    </div>
    <div class="sear">
      <div class="sear_item">
        <label class="sear_item_label">订单编号</label>
        <el-input class="sear_item_input" v-model="orderNo" placeholder="输入订单编号" clearable></el-input>
      </div>
      <div class="sear_item">
        <label class="sear_item_label">用户昵称</label>
        <el-input class="sear_item_input" v-model="nickname" placeholder="输入订单编号" clearable></el-input>
      </div>
      <div class="sear_item">
        <label class="sear_item_label">收货姓名</label>
        <el-input class="sear_item_input" v-model="receiveName" placeholder="输入订单编号" clearable></el-input>
      </div>
      <div class="sear_item">
        <label class="sear_item_label">收货电话</label>
        <el-input class="sear_item_input" v-model="receivePhone" placeholder="输入订单编号" clearable></el-input>
      </div>
      <div class="sear_item">
        <label class="sear_item_label">下单日期</label>
        <el-date-picker
          style="margin-left:10px"
          v-model="time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="sear_item">
        <el-button type="primary" size="small" @click="getOrderData">搜索</el-button>
      </div>
    </div>
    <el-table :data="tableData" border>
      <el-table-column label="id" width="50px" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.nickname}}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.productName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付金额" align="center">
        <template slot-scope="scope">
          <span>￥ {{scope.row.actualAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.receiveName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货电话" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.receivePhone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <span style="color:#ff0000">{{scope.row.statusMsg}}</span>
        </template>
      </el-table-column>
      <el-table-column label="详情" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="detail(scope.row.id,scope.row.status)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.status==1"
            @click="send(scope.row.id)"
          >发货</el-button>
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.status==4"
            @click="comment(scope.row.id)"
          >评论</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="index"
        :page-size="pageSize"
        :page-sizes="[10,20]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="确认发货" :visible.sync="visible1" width="500px">
      <el-form :model="sendForm" :rules="sendRules" ref="sendForm" label-width="80px">
        <el-form-item label="快递公司">
          <el-select v-model="sendForm.courierId" placeholder="请选择">
            <el-option
              v-for="item in courierCompany"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" prop="courierNo">
          <el-input
            placeholder="输入快递单号"
            v-model="sendForm.courierNo"
            style="width:300px"
            clearable
          />
        </el-form-item>
      </el-form>
      <div class="ok_bt">
        <el-button type="primary" size="small" @click="sendSure">确认发货</el-button>
      </div>
    </el-dialog>
    <el-dialog title="订单详情" :visible.sync="visible3">
      <div class="detail_view">
        <div class="detail_head">
          <div class="detail_head_left">订单编号 {{orderDetail.orderNo}}</div>
          <div class="detail_head_right">{{orderDetail.statusMsg}}</div>
        </div>
        <div class="detail_product_view">
          <el-table :data="orderDetail.orderItems">
            <el-table-column label="ID" width="50px">
              <template slot-scope="scope">
                <span>{{scope.row.id}}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品图片" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.image" class="product_img" />
              </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.productName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品规格" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.skuName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品价格" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.price}}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品数量" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.count}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="receive_title">收货信息</div>
        <div class="receive_view">
          <div class="receive_text">收货人: {{orderDetail.receiveName}}</div>
          <div class="receive_text">联系电话: {{orderDetail.receivePhone}}</div>
          <div
            class="receive_text"
          >收货地址: {{orderDetail.province+" "+orderDetail.city+" "+ orderDetail.area+" "+orderDetail.address}}</div>
        </div>
        <div class="receive_title">订单信息</div>
        <div class="amount_view">
          <div class="order_amount">
            <div class="amount_text">创建时间</div>
            <div class="time">{{orderDetail.createTime}}</div>
          </div>
          <div class="order_amount" v-if="orderDetail.payTime!=null">
            <div class="amount_text">支付时间</div>
            <div class="time">{{orderDetail.payTime}}</div>
          </div>
          <div class="order_amount" v-if="orderDetail.closeTime!=null">
            <div class="amount_text">关闭时间</div>
            <div class="time">{{orderDetail.closeTime}}</div>
          </div>
          <div class="order_amount" v-if="orderDetail.sendTime!=null">
            <div class="amount_text">发货时间</div>
            <div class="time">{{orderDetail.sendTime}}</div>
          </div>
          <div class="order_amount" v-if="orderDetail.receiveTime!=null">
            <div class="amount_text">收货时间</div>
            <div class="time">{{orderDetail.receiveTime}}</div>
          </div>
          <div class="order_amount">
            <div class="amount_text">商品总金额</div>
            <div class="amount">￥{{orderDetail.totalAmount}}</div>
          </div>
          <div class="order_amount">
            <div class="amount_text">优惠金额</div>
            <div class="amount">￥{{orderDetail.preferentialAmount}}</div>
          </div>
          <div class="order_amount">
            <div class="amount_text">运费</div>
            <div class="amount">￥{{orderDetail.freight}}</div>
          </div>
          <div class="order_amount">
            <div class="amount_text">实付</div>
            <div class="amount" style="font-size:16px;color:#ff0000">￥{{orderDetail.actualAmount}}</div>
          </div>
        </div>
        <div class="receive_title" v-if="Object.keys(courierInfo).length!=0">物流信息</div>
        <div class="amount_view" v-if="Object.keys(courierInfo).length!=0">
          <div class="order_amount">
            <div class="amount_text">快递单号</div>
            <div class="time">{{courierInfo.courierNo}}</div>
          </div>
          <div class="order_amount">
            <div class="amount_text">快递公司</div>
            <div class="time">{{courierInfo.courierName}}</div>
          </div>
          <div style="margin-top:15px">
            <div class="line-time" v-for="(item,index) in courierInfo.infos" :key="index">
              <div class="line-time-message">{{item.message}}</div>
              <div class="line-time-value">{{item.time}}</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="用户评论" :visible.sync="visible2" width="500px">
      <div v-for="(item,index) in commentData.items" :key="index" class="comment-item">
        <div class="product-div">
          <img :src="item.image" class="product-image" />
          <div class="product-intro">
            <div class="product-name">{{item.productName}}</div>
            <div class="product-sku-name">{{item.skuName}}</div>
          </div>
        </div>
        <el-rate class="rate" :value="3-item.commentItem.level" :max="max" disabled></el-rate>
        <div class="rate comment">{{item.commentItem.content}}</div>
        <el-image
          class="rate comment-image"
          :src="item.commentItem.image"
          fit="fill"
          v-if="item.commentItem.image!=''"
        ></el-image>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  orderList,
  send,
  detail,
  courierInfo,
  allCourierCompany,
  queryComment
} from "../../api/order.js";
import { format } from "@/utils/dateUtil.js";
export default {
  data() {
    return {
      max: 3,
      commentData: {},
      visible1: false,
      visible2: false,
      visible3: false,
      active: 0,
      tableData: [],
      type: "",
      orderNo: "",
      nickname: "",
      receiveName: "",
      receivePhone: "",
      time: "",
      index: 1,
      pageSize: 10,
      total: 0,
      sendId: 0,
      title: [
        { type: null, name: "全部" },
        { type: 0, name: "未付款" },
        { type: 1, name: "未发货" },
        { type: 2, name: "未收货" },
        { type: 3, name: "未评论" },
        { type: 4, name: "已完成" }
      ],
      orderDetail: {},
      courierInfo: {},
      courierCompany: [],
      sendForm: {
        courierId: "",
        courierNo: ""
      },
      sendRules: {
        courierNo: [
          { required: true, message: "请输入快递单号", trigger: "blur" },
          { min: 5, max: 20, message: "格式错误", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getOrderData();
    this.initCourierData();
  },
  methods: {
    sendSure() {
      this.$refs["sendForm"].validate(valid => {
        if (valid) {
          send(
            this.sendId,
            this.sendForm.courierId,
            this.sendForm.courierNo
          ).then(res => {
            this.$message({
              message: "发货成功",
              type: "success"
            });
            this.visible1 = false;
            this.sendForm = {
              courierId: "",
              courierNo: ""
            };
            this.index = 1;
            this.getOrderData();
          });
        }
      });
    },
    comment(id) {
      this.visible2 = true;
      queryComment(id).then(res => {
        this.commentData = res.data;
      });
    },
    send(id) {
      this.visible1 = true;
      this.sendId = id;
    },
    detail(id, status) {
      this.orderDetail = {};
      this.courierInfo = {};
      this.visible3 = true;
      detail(id).then(res => {
        this.orderDetail = res.data;
      });
      if (status == 2 || status == 3 || status == 4 || status == 5) {
        courierInfo(id).then(res => {
          this.courierInfo = res.data;
        });
      }
    },
    changeType(index) {
      this.active = index;
      this.getOrderData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getOrderData();
    },
    handleCurrentChange(page) {
      this.index = page;
      this.getOrderData();
    },
    initCourierData() {
      allCourierCompany().then(res => {
        this.courierCompany = res.data;
      });
    },
    getOrderData() {
      var type = this.title[this.active].type;

      var startTime = "";
      var endTime = "";
      if (this.time != null && this.time != "") {
        startTime = format(this.time[0]);
        endTime = format(this.time[1]);
      }

      orderList(
        type,
        this.orderNo,
        this.nickname,
        this.receiveName,
        this.receivePhone,
        startTime,
        endTime,
        this.index,
        this.pageSize
      ).then(res => {
        this.total = res.data.total;
        this.tableData = res.data.records;
      });
    }
  }
};
</script>
<style scoped>
.comment-image {
  width: 200px;
  height: 200px;
}
.comment {
  width: 300px;
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
  background-color: #f2f3f5;
  min-height: 120px;
  color: #606266;
  font-size: 14px;
}
.rate {
  margin-top: 10px;
  margin-left: 100px;
}
.product-div {
  display: flex;
}
.product-sku-name {
  width: 300px;
  color: #909399;
  font-size: 12px;
  margin-top: 10px;
}
.product-name {
  width: 300px;
  color: #606266;
  font-size: 14px;
}
.product-intro {
  margin-top: 10px;
  margin-left: 20px;
}
.product-image {
  width: 80px;
  height: 80px;
}
.comment-item {
  display: flex;
  flex-direction: column;
}
.line-time-value {
  font-size: 10px;
  color: #909399;
  margin-top: 10px;
}
.line-time-message {
  font-size: 14px;
  color: #606266;
}
.line-time {
  display: flex;
  flex-direction: column;
  margin: 10px 0;
}
.ins-active {
  width: 120px;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}
.active {
  width: 120px;
  height: 100%;
  border-bottom: 2px solid #16a9f2;
  justify-content: center;
  align-items: center;
  display: flex;
}
.title-name {
  font-size: 14px;
  color: #606266;
}
.ok_bt {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 40px;
  box-sizing: border-box;
}
.time {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}
.amount_view {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}
.amount {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}
.amount_text {
  font-size: 12px;
  color: #909399;
}
.order_amount {
  display: flex;
  margin-top: 10px;
  align-items: flex-end;
}
.receive_text {
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
}
.receive_title {
  font-size: 14px;
  color: #606266;
  margin-top: 20px;
}
.receive_view {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 20px;
}
.product_img {
  width: 50px;
  height: 50px;
}

.detail_product_view {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.detail_head_right {
  font-size: 14px;
  color: #ff0000;
}
.detail_head_left {
  font-size: 14px;
  color: #606266;
}
.detail_head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #f2f3f5;
}
.detail_view {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.sear_item_input {
  width: 200px;
  margin-left: 10px;
}
.sear_item_label {
  font-size: 14px;
  color: #606266;
}
.sear_item {
  margin: 10px;
  display: flex;
  align-items: center;
}
.title {
  cursor: pointer;
  flex: 1;
  justify-content: center;
  display: flex;
  border-left: 1px solid #f2f3f5;
}
.head {
  width: 100%;
  max-width: 100%;
  height: 50px;
  background-color: #ffffff;
  margin-bottom: 20px;
  display: flex;
}
.sear {
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  margin-bottom: 20px;
  display: flex;
  padding: 10px 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
</style>